Note: Cuando una animación finaliza, vuelve a su estilo original.
Note:Aqui se le da mas tiempo a cada animacion
La propiedad animation-delay especifica un retraso para el inicio de una animación. El siguiente ejemplo tiene un retraso de 2 segundos antes de comenzar la animación o se le puedo poner -2 y es como si ya hubiese comenzado la animacion
La propiedad animation-direction especifica si una animación debe reproducirse hacia adelante, hacia atrás o en ciclos alternos. El siguiente ejemplo ejecutará la animación en dirección inversa (hacia atrás):
La propiedad animation-timing-function especifica la curva de velocidad de la animación. El siguiente ejemplo muestra algunas de las diferentes curvas de velocidad que se pueden utilizar:
Deje que el elemento div conserve los valores de estilo establecidos por el último fotograma clave cuando finalice la animación:
Este ejemplo tiene seis de las propiedades de la prueba